<template>
	<view class="container">
		<hx-navbar title="企业认证" :back="true" :fixed="true" :backgroundColor="[255, 255, 255]">
		</hx-navbar>
		<view class="ytx"></view>
		<view class="">
			<view class="cu-form-group">
				<view class="title">企业名称</view>
				<input placeholder="请输入企业名称" name="input"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">统一信用代码 </view>
				<input placeholder="请输入信用代码" name="input"></input>
			</view>
			<view class="cu-form-group text">
				*请确保上传的照片边框完整、字迹清晰
			</view>
			<!-- <view class="cu-form-group"> -->
				<view class="grid col-4 grid-square flex-sub">
					<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
					 <image :src="imgList[index]" mode="aspectFill"></image>
						<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
							<text class='cuIcon-close'></text>
						</view>
					</view>
					<view class="solids" @tap="ChooseImage" v-if="imgList.length<1">
						<image src="../../static/imgs/license.png" mode="widthFix"></image>
					</view>
				</view>
			<!-- </view> -->
		</view>
	</view>
</template>

<script>
	export default {
	    data() {
	        return {
				imgList: [],
			}
		},
		methods:{
			ChooseImage() {
			    uni.chooseImage({
			        count: 4, //默认9
			        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			        sourceType: ['album'], //从相册选择
			        success: (res) => {
			            if (this.imgList.length != 0) {
			                this.imgList = this.imgList.concat(res.tempFilePaths);
			            } else {
			                this.imgList = res.tempFilePaths;
			            }
			        }
			    });
			},
			ViewImage(e) {
			    uni.previewImage({
			        urls: this.imgList,
			        current: e.currentTarget.dataset.url
			    });
			},
			DelImg(e) {
			    uni.showModal({
			        title: '召唤师',
			        content: '确定要删除这段回忆吗？',
			        cancelText: '再看看',
			        confirmText: '再见',
			        success: res => {
			            if (res.confirm) {
			                this.imgList.splice(e.currentTarget.dataset.index, 1);
			            }
			        }
			    });
			},
		}
	}
</script>

<style>
	.cu-form-group input{
		text-align: right;
	}
	.text{
		margin-top: 20rpx;
		margin-left: 24rpx;
		color: #999999;
	}
	.grid{
		margin-left: 45rpx;
	}
	.grid.col-4.grid-square>uni-view {
	    padding-bottom: 200rpx;
	    height: 0;
	    width: 320rpx;
	}
	.ytx {
		width: 100%;
		height: 20rpx;
		background-color: #F5F5F5;
	}
</style>
